<template>
  <div class="con2">
    <div class="con-title">
      {{ isPC ? 'Services' : 'Delivering The Best Global Payments Experience' }}
    </div>
    <div class="con-desc" v-if="isPC">
      <div>
        Onta Network connects the speed and flexibility of crypto with existing merchant networks to
      </div>
      <div>unlock open, compliant payments globally.</div>
    </div>
    <div class="con-desc" v-else>
      <div>
        Onta Network is payments in the age of internet capital markets - bringing the speed and
        interoperability of crypto to payment infrastructure around the world.
      </div>
    </div>
    <!-- pc -->
    <div class="cards" v-if="isPC">
      <div
        class="card card1"
        @click="goToWebUrl('https://apps.apple.com/cn/app/upnetwork/id6739867617')"
      >
        <div class="card-t1">OntaPay</div>
        <div class="card-t2">Custody your crypto,</div>
        <div class="card-t2">Control your payments</div>
        <div class="card-t2 card-down">Download</div>
        <img class="arrow" src="@/assets/png/arrow.png" alt="" />
      </div>
      <div class="card card2" @click="goToUrl('/map')">
        <div class="card-t3">Onta Network Explorer</div>
        <div class="card-t2 card-down">
          Deep dive Onta <br />
          Network in real time
        </div>
        <img class="arrow" src="@/assets/png/arrow.png" alt="" />
      </div>
      <div>
        <div class="card card3" @click="goToUrl('/services?locate=transactionsAsMining')">
          <div class="card-t3">Venue</div>
          <div class="card-t2 card-down">
            Transaction <br />
            As Mining
          </div>
          <img class="arrow" src="@/assets/png/arrow.png" alt="" />
        </div>
        <div class="card card4" @click="goToUrl('/map')">
          <div class="card-t3">
            Explore hundreds of global<br />
            merchants
          </div>
          <div class="card-t2 card-down">Learn More</div>
          <img class="arrow" src="@/assets/png/arrow.png" alt="" />
        </div>
      </div>
      <div
        class="card card5"
        v-for="(item, index) in mockDetailData"
        :key="index"
        :style="{ marginRight: index == 2 ? '0px' : '' }"
        @click="goToUrl(`/blogs-detail?id=${item.id}`)"
      >
        <div class="card-t3">Blog</div>
        <div class="card-down">
          <div class="card-t2 blog-left">
            {{ item.title }}
          </div>
          <div class="card-t3 t-right">
            {{ item.desc }}
          </div>
        </div>
      </div>
    </div>
    <!-- 移动 -->
    <div class="cards" v-if="!isPC">
      <div
        class="card card1"
        @click="goToWebUrl('https://apps.apple.com/cn/app/upnetwork/id6739867617')"
      >
        <div class="card-t1">OntaPay</div>
        <div class="card-t2">Custody your crypto,<br />Control your payments</div>
        <div class="card-t2 card-down">
          <div>Download</div>
          <img class="arrow" src="@/assets/png/arrow.png" alt="" />
        </div>
      </div>
      <div class="card card2" @click="goToUrl('/map')">
        <div class="card-t1">
          Deep dive Onta Network <br />
          in real time
        </div>
        <div class="card-t2">Onta Network Explorer</div>
        <div class="card-t2 card-down">
          <div>Explore</div>
          <img class="arrow" src="@/assets/png/arrow.png" alt="" />
        </div>
      </div>
      <div class="card card3" @click="goToUrl('/services?locate=transactionsAsMining')">
        <div class="card-t1">Transaction As Mining</div>
        <div class="card-t2">Onta Network Explorer</div>

        <div class="card-t2 card-down">
          <div>Explore</div>
          <img class="arrow" src="@/assets/png/arrow.png" alt="" />
        </div>
      </div>
      <div class="card card4" @click="goToUrl('/map')">
        <div class="card-t1">Learn More</div>
        <div class="card-t2">Onta Network Explorer</div>

        <div class="card-t2 card-down">
          <div>Explore</div>
          <img class="arrow" src="@/assets/png/arrow.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useConfig } from '@/stores/config.js'
import { mockDetailData } from '@/utils/mock.js'
export default {
  name: 'Services',
  data() {
    return {
      mockDetailData
    }
  },
  computed: {
    isPC() {
      return useConfig().isPc
    }
  },
  beforeMount: function () {},
  mounted() {},
  methods: {
    goToWebUrl(url) {
      window.open(url, '_blank')
    },
    goToUrl(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.less');
</style>
